<template>
    <div>
        <div class="history_warp" v-if="historyList">
            <ul v-if="!edit">
                <router-link
                    tag="li"
                    :to="`/details/${item.season_id || item.id}`"
                    v-for="item in historyList"
                    :key="item.id"
                >
                    <div class="left">
                        <van-image
                            width="23.5vw"
                            height="31.5vw"
                            fit="cover"
                            class="img"
                            :src="`${item.vertical_cover}`"
                        />
                    </div>
                    <div class="right_info">
                        <div class="info">
                            <h3>{{ item.title }}</h3>
                            <p>
                                {{
                                    read
                                        ? "看到" +
                                          item.ep_list.filter(
                                              (v) =>
                                                  v.id ==
                                                  read.filter((v) => v.comicid == item.id)[0]
                                                      .ep_list[
                                                      read.filter((v) => v.comicid == item.id)[0]
                                                          .ep_list.length - 1
                                                  ]
                                          )[0].ord +
                                          "话"
                                        : "未看"
                                }}/{{
                                    item.last_ord == item.total
                                        ? `[完结]共${item.last_ord}话`
                                        : `更新至${item.last_short_title}话`
                                }}
                            </p>
                            <span>续看</span>
                        </div>
                        <div class="time">{{ item.time | fornatTime }}</div>
                    </div>
                </router-link>
            </ul>

            <ul v-else>
                <li v-for="item in historyList" :key="item.id">
                    <div class="checked" @click.stop="choose(item.id)">
                        <div v-if="!item.checked" class="round"></div>
                        <div v-else class="choose">
                            <img src="../assets/images/choose.png" alt="" />
                        </div>
                    </div>

                    <div class="left">
                        <van-image
                            width="23.5vw"
                            height="31.5vw"
                            fit="cover"
                            class="img"
                            :src="`${item.vertical_cover}`"
                        />
                    </div>
                    <div class="right_info">
                        <div class="info">
                            <h3>{{ item.title }}</h3>
                            <p>
                                {{
                                    read
                                        ? "看到" +
                                          item.ep_list.filter(
                                              (v) =>
                                                  v.id ==
                                                  read.filter((v) => v.comicid == item.id)[0]
                                                      .ep_list[
                                                      read.filter((v) => v.comicid == item.id)[0]
                                                          .ep_list.length - 1
                                                  ]
                                          )[0].ord +
                                          "话"
                                        : "未看"
                                }}/{{
                                    item.last_ord == item.total
                                        ? `[完结]共${item.last_ord}话`
                                        : `更新至${item.last_short_title}话`
                                }}
                            </p>
                        </div>
                        <div class="time">{{ item.time | fornatTime }}</div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    props: ["historyList", "edit", "read"],
    filters: {
        fornatTime(value) {
            let d = new Date(value);
            let year = d.getFullYear();
            let month = d.getMonth() + 1;
            let day = d.getDate();
            let h = d.getHours();
            h = h < 10 ? "0" + h : h;
            let m = d.getMinutes();
            m = m < 10 ? "0" + m : m;
            let time = year + "-" + month + "-" + day + " " + h + ":" + m;
            return time;
        },
    },
    methods: {
        choose(id) {
            this.$emit("choose", id);
        },
    },
};
</script>
<style lang="scss" scoped>
.history_warp {
    h2 {
        padding-bottom: 15px;
        font-size: 14px;
        color: #999;
        font-weight: bold;
    }
    ul {
        li {
            display: flex;
            margin-bottom: 15px;
            .checked {
                width: 50px;
                position: relative;
                border-radius: 50%;
                .round {
                    position: absolute;
                    top: 40px;
                    left: 10px;
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    border: 1px solid #999;
                }
                .choose {
                    position: absolute;
                    top: 40px;
                    left: 10px;
                    width: 20px;
                    img {
                        border-radius: 50%;
                    }
                }
            }
            .left {
                img {
                }
            }
            .right_info {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                padding-left: 10px;
                .info {
                    width: 50vw;
                    position: relative;

                    h3 {
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        font-size: 15px;
                        font-weight: bold;
                        padding-left: 5px;
                    }
                    p {
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        padding-top: 5px;
                        font-size: 12px;
                        color: #999;
                    }
                    span {
                        position: absolute;
                        top: 25px;
                        right: -50px;
                        color: skyblue;
                        font-weight: bold;
                        border: 1px solid skyblue;
                        padding: 5px 20px;
                        border-radius: 20px;
                    }
                }

                .time {
                    color: #999;
                    font-size: 14px;
                }
            }
        }
    }
}
</style>
